import React from 'react'
import './Login.css'
import { Button,WingBlank, WhiteSpace } from 'antd-mobile'
import axios from 'axios'

class Login extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            shop_email:"",
            shop_pwd:"",
            code:''
        }
    }
    gotoRegistered = () => {
        this.props.history.push('/Registered')
    }

    inputChange(e,val){
        if(val==='shop_email'){
            this.setState({
                shop_email:e.target.value
            })
        }else if(val ==='shop_pwd'){
            this.setState({
                shop_pwd:e.target.value
            })
        }else{
            this.setState({
                code:e.target.value
            })
        }
        
    }

    gotoUsers = () =>{
        let storage = window.localStorage;
        let shop_email =this.state.shop_email
        axios({
            url:'api/olife/login/ShopLogin',
            method:'post',
            data:{
                shop_email:this.state.shop_email,
                shop_pwd:this.state.shop_pwd,
                code:''
            }
        }).then(data =>{
            if(data.status === 200){
                    if(data.data.code == '200'){
                        alert('登录成功')
                    this.props.history.push('/Home')
                }else if(data.data.code === '403'){
                    alert('验证码错误')
                }else {
                    alert('账号密码有误')
                }
            }
        })
    }
    gotoVerification = () =>{
        let shop_email =this.state.shop_email
        console.log(shop_email);
        axios({
            url:'api/olife/login/VerificationCode',
            method:'get',
            params:{
                shop_email:this.state.shop_email,
            }
        }).then(data =>{
            console.log(data);
        })
    }
    //手机号判断
    // telCheck(event){
    //     this.tel=event.target.value
    //     console.log(this.tel)
    //     var reg=/^1[34578]\d{9}$/;
    //     if(reg.test(this.tel)==false){
    //         this.setState({
    //            telError:"请输入正确的手机号"
    //         })
    //     }else{
    //         this.setState({
    //             telError:""
    //         })
    //     }
    // }

    //密码判断

    // passwordCheck(event){
    //     this.password=event.target.value
    //     var reg=/^\w{6,20}$/;
    //     if(reg.test(this.password)==false){
    //         this.setState({
    //             passwordError:"密码为6-20位数字或字母或下划线!"
    //         })
    //     }else{
    //         this.setState({
    //             passwordError:""
    //         })
    //         }
    // }

    WingBlankExample = () => (
        <div style={{ padding: '15px 0' }}>
            <WingBlank>
                <h2>请登录</h2>
                <div className='myinput'>
                    <input type="text"  onChange={(e)=>this.inputChange(e,'shop_email')} placeholder='请输入手机号或者邮箱'/>
                    <input type="pwdType"  onChange={(e)=>this.inputChange(e,'shop_pwd')} placeholder='请输入密码'/>
                    <input type="text" onChange={(e)=>this.inputChange(e,'code')} placeholder='请输入验证码'/>
                    <Button onClick={this.gotoVerification}>获取验证码</Button>
                    <Button type="primary" size="small" inline onClick={this.gotoUsers}>登录</Button>
                    <p onClick={this.gotoRegistered}>没有账号？点此注册 ＞</p>
                </div>
            </WingBlank>
        </div>
    );

    
    render() {
        return (
            /* html */
            <div>
                {this.WingBlankExample()}
            </div>
        )
    }
}

export default Login